<template>
    <div class="right1">
        <div class="small-title">
            <span>设备信息</span>
        </div>
        <div class="overturning" ref="rightOneEcharts"></div>
        <div class="deviceName">
          <ul >
            <li>土壤墒情仪</li>
            <li>智能摄像头</li>
          </ul>
        </div>
    </div>
</template>

<script setup>
import { onMounted ,ref} from "vue";
import 'echarts-liquidfill'//水球图 插件
import * as echarts from "echarts";
// import 'echarts-gl';
const rightOneEcharts=ref();
onMounted(()=>{
    const mycharts=echarts.init(rightOneEcharts.value);
    const option ={
        series: [{
    type: 'liquidFill',
    center: ['28%',
      '50%'],
    radius: '60%',
    color: ['#7ca5ff',
      '#7ca5ff'],
    //水波颜色
    data: [0.4],//水波百分比
    itemStyle: {
      normal: {
        shadowBlur: 0
      }
    },
    label: {
      normal: {
        formatter: function(item) {
        //   return (item.value * 100).toFixed(1) + '%'
        return 6
        },
        color: '#fff',
        insideColor: '#fff',
        fontSize: 30
      }
    },
    backgroundStyle: {
      borderWidth: 2,
      borderColor: '#7ca5ff',
      color: 'rgb(255,0,255,0.01)'
    },
    outline: {
      borderDistance: 15,
      itemStyle: {
        borderWidth: 0,
        borderColor: '#7ca5ff',
        borderType: 'dashed',
      }
    },
  },
    {
      type: 'liquidFill',
      center: ['75%',
        '50%'],
      radius: '60%',
      color: ['#7ca5ff',
        '#7ca5ff'],
      //水波颜色
      data: [0.7],
      itemStyle: {
        normal: {
          shadowBlur: 0
        }
      },
      label: {
        normal: {
          formatter: function(item) {
            // return (item.value * 100).toFixed(1) + '%'
            return 12
          },
          // textStyle: {
          color: '#fff',
          insideColor: '#fff',
          fontSize: 30
          // }
        }
      },
      backgroundStyle: {
        borderWidth: 2,
        borderColor: '#7ca5ff',
        color: 'rgb(255,0,255,0.01)'
      },
      outline: {
        borderDistance: 15,
        itemStyle: {
          borderWidth: 0,
          borderColor: '#7ca5ff',
          borderType: 'dashed',
        }
      },
    },
    ]
  }
        mycharts.setOption(option);
    
})

</script>
<style lang="scss" scoped>
.right1 {
  width: 25%;
  height: calc(100% / 3 - 57px);
  background-image: url("@/assets/img/backg1.png");
  background-size: 100% 100%;
  position: fixed;
  top: 94px;
  float: left;
  .small-title {
    left: 5%;
    position: relative;
        span {
        color: rgb(157, 211, 236);
        position: relative;

      }
            .overturning-select {
                font-size: 16px;
                height: 30px;
                border-radius: 5px;
                background-color: transparent;
                color: wheat;
                position: absolute;
                top: 50%;
                right: 4%;
                margin-top: -12px;
            }
        } 
        .overturning {
            width: 100%;
            height: 70%;
        } 
        .deviceName{
          width: 100%;
          height: 20%;
          color: white;
          ul{
            list-style: none;
            display: flex;
            justify-content:space-around;
            padding-inline-start:10px
          }
        } 
    }

</style>